import React, { Component } from 'react';
import {
    Form, DatePicker, Checkbox, Select, Button
} from 'antd';
import SelectUser from "../../../components/SelectUser";
import '../Task.less';

const { RangePicker } = DatePicker;
const Option = Select.Option;
const userdata = [
    {
        "title": "测试一部",
        "key": "a",
        "treeType": "1",
        "clildren": [
            {
                "title": "测试一部",
                "key": "393412400792993801",
                "treeType": "1",
                "clildren": null
            },
            {
                "title": "李四",
                "key": "393412400792993802",
                "treeType": "2",
                "clildren": null
            },
            {
                "title": "测试人员3",
                "key": "394807930752335903",
                "treeType": "2",
                "clildren": null
            }
        ]
    },
    {
        "title": "测试二部",
        "key": "b",
        "treeType": "1",
        "clildren": [
            {
                "title": "测试一部",
                "key": "395241451308449804",
                "treeType": "2",
                "clildren": null
            },
            {
                "title": "李四",
                "key": "393412400792993805",
                "treeType": "2",
                "clildren": null
            },
            {
                "title": "测试人员3",
                "key": "394807930752335906",
                "treeType": "2",
                "clildren": null
            }
        ]
    },
    {
        "title": "测试三部",
        "key": "c",
        "treeType": "1",
        "clildren": [
            {
                "title": "李娜",
                "key": "394807930752335907",
                "treeType": "2",
                "clildren": null
            }
        ]
    },
    {
        "title": "测试人员1",
        "key": "394807930752335908",
        "treeType": "2",
        "clildren": null
    }, {
        "title": "测试人员2",
        "key": "394807930752335909",
        "treeType": "2",
        "clildren": null
    }, {
        "title": "测试人员3",
        "key": "3948079307523359010",
        "treeType": "2",
        "clildren": null
    }
];



@Form.create()
export default class TaskDetailRelatedMatters extends Component {
    componentDidMount() {
    }


    render() {



        return (
            <div className="TaskDetail TaskDetailShift">
                <div className="taskdetail-title">调班-增援</div>
                <div className="dh taskdetailshiftreinforce_step-dh" />
                <div className="Select-box">
                    <div className="select-list">
                        <div className="listtitle">选择增援的员工？（可多选）</div>
                        <SelectUser value={["394807930752335907"]} type="checkbox" data={userdata} onSelect={(val) => { console.log(val); }} />
                    </div>

                    <div className="select-list">
                        <div className="listtitle">哪个班次要增援?</div>
                        <div className="ShiftSelect">
                            <div className="select-time">排班时间:<RangePicker style={{ width: 199 }} placeholder={["开始时间", "结束时间"]} /></div>
                            <div className="select-all"> <Checkbox>全选</Checkbox></div>
                            <Select className="select-month" defaultValue="lucy">
                                <Option value="jack">11</Option>
                                <Option value="lucy">12</Option>
                            </Select>
                            <Checkbox.Group style={{ width: '100%' }} >
                                <div className="ShiftSelect-list-box">
                                    <div className="ShiftSelect-row">
                                        <div className="ShiftSelect-number">11</div>
                                        <Checkbox value="A">10:00~12:00</Checkbox>
                                        <Checkbox value="A">10:00~12:00</Checkbox>
                                    </div>
                                    <div className="ShiftSelect-row">
                                        <div className="ShiftSelect-number">11</div>
                                        <Checkbox value="A">10:00~12:00</Checkbox>
                                        <Checkbox value="A">10:00~12:00</Checkbox>
                                    </div>
                                    <div className="ShiftSelect-row">
                                        <div className="ShiftSelect-number">11</div>
                                        <Checkbox value="A">10:00~12:00</Checkbox>
                                        <Checkbox value="A">10:00~12:00</Checkbox>
                                    </div>
                                </div>
                            </Checkbox.Group>
                        </div>
                    </div>



                </div>
                <div className="btnbox"><Button>取消</Button><Button type="primary">选好了</Button></div>
            </div>
        );
    }
}

